<template>
	<view class="wap">
		<view class="pub" style="margin-bottom: 64rpx;">
			<view style="font-size: 32rpx; font-weight: bold;" class="pub1">个人信息</view>
			<view class="pub1" style="padding: 16rpx 32rpx;">
				<view>头像</view>
				<view>
					<image src="" mode="" class="head"></image>
					<image :src="require('./static/img/right.png')" mode=""></image>
				</view>
			</view>
			<navigator url="/pages/modlName/modlName">
				<view class="pub1">
					<view>昵称</view>
					<view>
						<text style="font-weight: 400;">秋叶艺术家</text>
						<image :src="require('./static/img/right.png')" mode=""></image>
					</view>
				</view>
			</navigator>
			
			<view class="pub1" @click="utigender">
				<view>性别</view>
				<view>
					<text style="font-weight: 400;">{{gender}}</text>
					<image :src="require('./static/img/right.png')" mode=""></image>
				</view>
			</view>
			
			<navigator url="/pages/modlSigna/modlSigna">
				<view class="pub1">
					<view>个性签名</view>
					<view style="display: flex; align-items: center;">
						<text class="sign">只要我可以独自走过这四季sdasdasds…</text>
						<image :src="require('./static/img/right.png')" mode=""></image>
					</view>
				</view>
			</navigator>
			
		</view>
		
		<view class="pub">
			<view style="font-size: 32rpx; font-weight: bold;" class="pub1">账号设置</view>
			<view class="pub1">
				<view>修改手机号</view>
				<view>
					<text>17640783220</text>
					<image :src="require('./static/img/right.png')" mode=""></image>
				</view>
			</view>
			<view class="pub1">
				<view>关于Molly</view>
				<view>
					<image :src="require('./static/img/right.png')" mode=""></image>
				</view>
			</view>
			<view class="pub1">
				<view>意见反馈</view>
				<view>
					<image :src="require('./static/img/right.png')" mode=""></image>
				</view>
			</view>
			<view class="pub1">
				<view>退出账号</view>
				<view>
					<image :src="require('./static/img/right.png')" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 蒙层 -->
		<view class="genderbg" v-if="genderShow">
			<view class="gender">
				<view class="gender_title">
					<view  style="color: #999999;" @click="utigender()">取消</view>
					<view>选择性别</view>
					<view style="color:#FEDD12;" @click="complete">完成</view>
				</view>
				<!-- <view class="" style="margin-bottom: 64rpx;">男</view>
				<view class="active">女</view> -->
				<view style="margin-top: 64rpx;" v-for="(item,index) in genderList" :key="item.value" :class="item.isActive?'active':''"  @click="handleItemTap(index,item.value)">{{item.value}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				genderShow:false,
				gender:"男",
				genderpri:"",
				genderList:[
					{
						value:"男",
						isActive:false
						
					},
					{
						value:"女",
						isActive:true
					}
				]
			}
		},
		methods: {
			utigender(){
				this.genderShow=!this.genderShow
			},
			handleItemTap(index,i){
				this.genderpri = i
				this.genderList.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
			},
			complete(){
				this.gender = this.genderpri
				this.genderShow=!this.genderShow
			}
		}
	}
</script>

<style lang="scss" scoped>
.wap{
	// height: 100vh;	
	background: #F3F3F3;
	padding: 32rpx;
	.pub{
		background: #FFFFFF;
		border-radius: 16rpx;
		font-weight: 300;
		.pub1{
			padding: 32rpx 32rpx;
			border-bottom: 1rpx solid #F3F3F3;
			display: flex;
			justify-content: space-between;
			align-items:center;
			.head{
				width: 80rpx;
				height: 80rpx;
				border: 1rpx solid #C0C0C0;
				border-radius: 50%;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				vertical-align:middle;
			}
			.sign{
				font-size: 30rpx;
				font-weight: 400;
				display: inline-block;
				width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
		}
		
	}
	.genderbg{
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		top: 0;
		left: 0;
		.gender{
			height: 480rpx;
			width: 100%;
			position: absolute;
			bottom: 0;
			z-index: 100;
			background: #FFFFFF;
			padding: 32rpx;
			box-sizing: border-box;
			text-align:center;
			font-size: 30rpx;
			.gender_title{
				display: flex;
				justify-content: space-between;
			}
			.active{
				font-size: 40rpx;
				font-weight: bold;
			}
		}
	}
}
</style>
